<template>
  <div class="add_con">
    <el-card class="box-card">
      <div>
        <span class="el-icon-goods"></span>
        <span> 修改商品信息</span>
      </div>
    </el-card>

    <!-- 创建Form 表单 -->
    <el-card class="box-card">
      <div>
        <!-- :model="listQuery" 添加数据时需要提交的表单内容 放到listQuery
        :rules="rules" 验证内容
        ref="ruleForm"  提交表单的函数
          -->
        <el-form
          :model="listQuery"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
          label-width="120px"
        >
          <!-- 商品分类 -->
          <el-form-item label="商品分类" prop="product_category_id">
            <!-- productCateOptions: [], //商品分类option的数据 \ productCateValue: null, //选中的cate的数据 -->
            <el-cascader
              v-model="productCateValue"
              :options="productCateOptions"
              placeholder="请选择分类"
            ></el-cascader>
          </el-form-item>

          <!-- 商品名称 -->
          <el-form-item label="商品名称" prop="name">
            <el-input
              v-model="listQuery.name"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>

          <!-- 副标题 -->
          <el-form-item label="副标题" prop="sub_title">
            <el-input
              v-model="listQuery.sub_title"
              placeholder="请输入副标题"
            ></el-input>
          </el-form-item>

          <!-- 商品品牌 -->
          <el-form-item label="商品品牌:" prop="brand_id">
            <el-select v-model="listQuery.brand_id" placeholder="全部">
              <el-option
                v-for="item in brandOptions"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 商品介绍 -->
          <el-form-item label="商品介绍" prop="description">
            <el-input
              type="textarea"
              v-model="listQuery.description"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>

          <!-- 图片链接地址 -->
          <el-form-item label="图片链接地址" prop="pic">
            <el-input
              v-model="listQuery.pic"
              placeholder="请输入图片链接地址"
            ></el-input>
          </el-form-item>

          <!-- 商品货号 -->
          <el-form-item label="商品货号:" prop="product_sn">
            <el-input
              v-model="listQuery.product_sn"
              class="input-width"
              placeholder="请输入货号"
            ></el-input>
          </el-form-item>

          <!-- 商品售价 -->
          <el-form-item label="商品售价:" prop="price">
            <el-input v-model="listQuery.price" class="input-width"></el-input>
          </el-form-item>

          <!-- 市场价 -->
          <el-form-item label="市场价:" prop="original_price">
            <el-input
              v-model="listQuery.original_price"
              class="input-width"
            ></el-input>
          </el-form-item>

          <!-- 商品库存 -->
          <el-form-item label="商品库存:" prop="stock">
            <el-input v-model="listQuery.stock" class="input-width"></el-input>
          </el-form-item>

          <!-- 计量单位 -->
          <el-form-item label="计量单位:" prop="unit">
            <el-input v-model="listQuery.unit" class="input-width"></el-input>
          </el-form-item>

          <!-- 商品重量 -->
          <el-form-item label="商品重量:" prop="weight">
            <el-input
              v-model="listQuery.weight"
              class="input-width zhongLiang"
            ></el-input
            >克
          </el-form-item>

          <!-- 排序 -->
          <el-form-item label="排序:" prop="sort">
            <el-input v-model="listQuery.sort" class="input-width"></el-input>
          </el-form-item>

          <!-- 创建添加商品 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <!-- 5.修改编辑的：这里有改成resetForm: -->
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
  

<script>
// 引入 api接口
//export 导出时 如果没有使用 default ，在其他文件引入的时候需要写{}

// 1.修改：引入接口api
import {
  updateProduct,
  fetchOneProduct,
  fetchParentProductCate,
} from "@/api/product";
import { fetchBrandList, fetchCateList } from "@/api/product";

export default {
  name: "productadd",
  data: function () {
    return {
      listQuery: {
        brand_id: null, //商品品牌id
        brand_name: "", //商品品牌名称
        delete_status: 0, //删除标志位，默认填0，表示未删除
        description: "", //商品介绍
        name: "", //商品名称
        original_price: 0, //市场价
        pic: "", //商品图片的url地址
        price: 0, //商品售价
        product_category_id: null, //分类id
        product_category_name: "", //分类名称
        product_sn: "", //商品货号
        sort: 0, //排序
        stock: 0, //商品库存
        sub_title: "", //副标题
        unit: "", //计量单位
        weight: 0, //商品重量
        sale: 0, //商品销量
        publish_status: 0, //上架
        new_status: 0, //新品
        recommand_status: 0, //推荐
        verify_status: 0, //审核状态
      },
      //验证规则
      //rules验证内容
      rules: {
        //分类id
        product_category_id: [
          { required: true, message: "请选择分类", trigger: "blur" },
        ],
        //商品名称
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 3,
            max: 100,
            message: "长度在3-100个字符之间",
            trigger: "blur",
          },
        ],
        //副标题
        sub_title: [
          { required: true, message: "请输入副标题名称", trigger: "blur" },
        ],
        //商品品牌id
        brand_id: [{ required: true, message: "请选择品牌", trigger: "blur" }],
        //商品介绍
        description: [
          { required: true, message: "请输入商品介绍", trigger: "blur" },
        ],
        //商品图片的url地址
        pic: [
          { required: true, message: "请输入图片链接地址", trigger: "blur" },
        ],
      },
      brandOptions: [], //商品品牌列表
      productCateValue: [], //选中的分类 cate的数据
      productCateOptions: [], //商品分类option的数据
    };
  },
  mounted() {
    //调用 获取 品牌列表
    this.getBrandData();

    //调用 获取分类列表
    this.getCateData();

    // 3.修改:调用 获取从列表页传过来的参数
    console.log(this.$route.params.id);

    //3.修改:调用 获取 一条商品数据
    this.getOneProduct();
  },
  methods: {
    //获取 分类列表数据
    async getCateData() {
      var res = await fetchCateList();
      console.log(res);
      //重组数据(一级)
      var data = res.data;
      data.forEach((i) => {
        let children = []; //放子节点数据
        //重组子级节点数据(二级)
        i.children.forEach((j) => {
          children.push({
            label: j.name,
            value: j.id,
          });
        });
        this.productCateOptions.push({
          label: i.name,
          value: i.id,
          children: children,
        });
      });
      console.log(this.productCateOptions);
    },
    //获取品牌列表
    async getBrandData() {
      var res = await fetchBrandList();
      console.log(res);
      this.brandOptions = res.data;
    },
    //提交表单的函数
    submitForm() {
      //validata是一个函数，功能是对表单进行验证
      //参数是回调函数，回调函数中的参数valid的值可以是true（验证通过） 或false（验证失败）
      //console.log(this.$refs[formName]); //element ui 封装的 表单组件

      // 5.修改：编辑的：这里有改成ruleForm
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          //验证通过
          console.log("可以提交表单了");
          //添加商品二级分类名称、商品品牌名称  brand_id:商品品牌id  brand_name:商品品牌名称
          this.brandOptions.forEach((i) => {
            if (i.id == this.listQuery.brand_id) {
              this.listQuery.brand_name = i.name;
            }
          });
          this.productCateOptions.forEach((i) => {
            i.children.forEach((j) => {
              if (j.value == this.listQuery.product_category_id) {
                this.listQuery.product_category_name = j.label;
              }
            });
          });
          //4.修改: 将 添加接口的名字改为 修改（message: "成功修改了一条商品记录"）、 调用后台接口updateProduct
          console.log(this.listQuery);
          //调用后台接口，添加商品数据
          updateProduct(this.listQuery).then((res) => {
            console.log(res);
            if (res.status == 200) {
              //判断状态码 200成功
              //提示
              this.$message({
                message: "成功修改了一条商品记录",
                type: "success",
              });
              //跳转到列表页面
              this.$router.push("/pms/product");
            }
          });
        } else {
          //验证没通过
          console.log("验证失败");
          return false;
        }
      });
    },
    // 2.修改: 添加获取 一条商品记录，和 通过子级id获取父级id的函数
    // 2.1修改: 获取 一条商品数据
    async getOneProduct() {
      var res = await fetchOneProduct({ id: this.$route.params.id });
      console.log(res);
      this.listQuery = res.data;
      this.getParentProductCate(this.listQuery.product_category_id);
    },

    // 2.2修改: 修改页面打开时，添加 商品分类的选中状态
    async getParentProductCate(id) {
      //获取商品分类的父级数据
      var res = await fetchParentProductCate({ id: id });
      console.log(res);
      //将 一级分类和二级分类的id 赋值给productCateValue
      this.productCateValue.push(res.data.parent_id);
      this.productCateValue.push(res.data.id);
    },
  },
  watch: {
    //监听级联菜单的选中的数据是否发生变化了
    productCateValue(newV) {
      console.log(newV);
      //找到数组的1号元素，赋值给product_category_id
      this.listQuery.product_category_id = newV[1];
    },
  },
};
</script>

<style scoped lang="scss">
.add_con {
  margin: 20px;
  .box-card {
    margin-bottom: 20px;
    .zhongLiang {
      width: 200px;
    }
  }
}
</style>